<template>
    <view class="content-title">
        <view class="content-name">{{ name }}</view>
        <view class="content-line"></view>
        <view class="content-describe">{{ describe }}</view>
        <slot />
    </view>
</template>

<script lang="ts">
import Vue from "vue"

export default Vue.extend({
    props: {
        name: {
            type: String,
        },
        describe: {
            type: String,
        },
    },
    methods: {},
})
</script>

<style scoped>
.content-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  box-sizing: border-box;
  padding-bottom: 160rpx;
}

.content-name {
  font-size: 36rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(69, 82, 107, 1);
  line-height: 50rpx;
  margin-top: 22rpx;
}

.content-line {
  width: 28rpx;
  height: 6rpx;
  background: rgba(69, 82, 107, 1);
  border-radius: 2px;
}

.content-describe {
  font-size: 24rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(140, 152, 174, 1);
  line-height: 24rpx;
  margin-top: 6rpx;
  margin-bottom: 22rpx
}
</style>